<div class="col-sm-12">
    <div class="widget-box">
        <div class="widget-header header-color-green">
            <h4 class="lighter smaller">{:L('MENU_LIST')}</h4>
            <a class="tarmain pull-right btn btn-xs btn-primary add-menu" href="{:U('Menu/add')}">
                <span class="glyphicon glyphicon-plus"></span>添加菜单
            </a>
        </div>
        <div class="widget-body">
            <div class="widget-main padding-8">
                <div id="menu-tree" class="tree">
                    <div class="tree-folder">
                        <div class="tree-folder-header">
                            <i class="glyphicon glyphicon-chevron-right"></i>
                            <div class="tree-folder-name">
                                <i class="glyphicon glyphicon-dashboard"></i>
                                控制台
                            </div>
                        </div>
                        <div class="tree-folder-content hide">
                            <div class="tree-item">
                                <div class="tree-item-name">设置</div>
                            </div>
                            <div class="tree-item">
                                <div class="tree-item-name">个人资料</div>
                            </div>
                        </div>
                    </div>
                    <div class="tree-folder">
                        <div class="tree-folder-header">
                            <i class="glyphicon glyphicon-chevron-right"></i>
                            <div class="tree-folder-name">
                                <i class="glyphicon glyphicon-cog"></i>
                                系统设置
                            </div>
                        </div>
                        <div class="tree-folder-content hide">
                            <div class="tree-folder">
                                <div class="tree-folder-header">
                                    <i class="glyphicon glyphicon-chevron-right"></i>
                                    <div class="tree-folder-name">站点设置</div>
                                </div>
                                <div class="tree-folder-content hide">
                                    <div class="tree-item">
                                        <div class="tree-item-name">SEO配置</div>
                                    </div>
                                    <div class="tree-item">
                                        <div class="tree-item-name">系统管理</div>
                                    </div>
                                </div>
                                <div class="tree-loader hide">
                                    <div class="tree-loading">
                                        <i class="glyphicon glyphicon-refresh blue"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="tree-item">
                                <div class="tree-item-name">其它</div>
                            </div>
                        </div>
                    </div>
                    <div class="tree-item">
                        <div class="tree-item-name">系统管理</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--<js href="__PUBLIC__/bootstrap/js/fuelux.tree.js"/>-->
<script type="text/javascript">
/*    var DataSourceTree = function(options) {
	this._data 	= options.data;
	this._delay = options.delay;
    };

    DataSourceTree.prototype.data = function(options, callback) {
	var self = this;
	var $data = null;

	if(!("name" in options) && !("type" in options)){
            $data = this._data;//the root tree
            callback({ data: $data });
            return;
	}else if("type" in options && options.type == "folder") {
            if("additionalParameters" in options && "children" in options.additionalParameters)
                    $data = options.additionalParameters.children;
            else $data = {}//no data
	}
	
	if($data != null)//this setTimeout is only for mimicking some random delay
		setTimeout(function(){callback({ data: $data });} , parseInt(Math.random() * 500) + 200);
    };

    var tree_data = {
	'index' : {name: '<i class="glyphicon glyphicon-dashboard"></i> 控制台', type: 'folder', 'icon-class':'glyphicon'},
	'osset' : {name: '<i class="glyphicon glyphicon-cog"></i> 系统设置', type: 'folder', 'icon-class':'glyphicon'}	,
	'video' : {name: 'Video', type: 'folder', 'icon-class':'glyphicon'}	,
	'documents' : {name: 'Documents', type: 'folder', 'icon-class':'glyphicon'}	,
	'backup' : {name: 'Backup', type: 'folder','icon-class':'glyphicon'}	,
	'readme' : {name: '<i class="glyphicon glyphicon-file grey"></i> ReadMe.txt', type: 'item'},
	'manual' : {name: '<i class="glyphicon glyphicon-book blue"></i> Manual.html', type: 'item'}
    };
    tree_data['index']['additionalParameters'] = {
        'children':{
            'set':{name:'设置',type:'item'},
            'profile':{name:'个人资料',type:'item'}
        }
    };
    tree_data['osset']['additionalParameters'] = {
        'children':{
            'siteset':{name:'站点配置',type:'folder','icon-class':'glyphicon'},
            'd':{name:'推荐位管理',type:'item'},
            'c':{name:'数据库管理',type:'item'},
            'a':{name:'URL规则',type:'item'},
            'sf':{name:'DB数据源',type:'item'},
            'dfe':{name:'多语言管理',type:'item'},
            'dfeggg':{name:'类别管理',type:'item'},
            'meun':{name:'后台管理菜单',type:'item'}
        }
    };
    tree_data['osset']['additionalParameters']['children']['siteset']['additionalParameters'] = {
        'children':[
            {name:'SEO配置',type:'item'},
            {name:'系统管理',type:'item'},
            {name:'系统邮箱',type:'item'},
            {name:'附件配置',type:'item'},
            {name:'用户中心设置',type:'item'},
            {name:'添加系统变量',type:'item'}
        ]
    };
    /*tree_data['music']['additionalParameters'] = {
	'children' : [
            {name: '<i class="glyphicon glyphicon-music blue"></i> song1.ogg', type: 'item'},
            {name: '<i class="glyphicon glyphicon-music blue"></i> song2.ogg', type: 'item'},
            {name: '<i class="glyphicon glyphicon-music blue"></i> song3.ogg', type: 'item'},
            {name: '<i class="glyphicon glyphicon-music blue"></i> song4.ogg', type: 'item'},
            {name: '<i class="glyphicon glyphicon-music blue"></i> song5.ogg', type: 'item'}
	]
    };
    tree_data['video']['additionalParameters'] = {
	'children' : [
            {name: '<i class="glyphicon glyphicon-film blue"></i> movie1.avi', type: 'item'},
            {name: '<i class="glyphicon glyphicon-film blue"></i> movie2.avi', type: 'item'},
            {name: '<i class="glyphicon glyphicon-film blue"></i> movie3.avi', type: 'item'},
            {name: '<i class="glyphicon glyphicon-film blue"></i> movie4.avi', type: 'item'},
            {name: '<i class="glyphicon glyphicon-film blue"></i> movie5.avi', type: 'item'}
	]
    };
    tree_data['pictures']['additionalParameters'] = {
	'children' : {
            'wallpapers' : {name: 'Wallpapers', type: 'folder', 'icon-class':'glyphicon pink'},
            'camera' : {name: 'Camera', type: 'folder', 'icon-class':'glyphicon pink'}
	}
    };
    tree_data['pictures']['additionalParameters']['children']['wallpapers']['additionalParameters'] = {
	'children' : [
            {name: '<i class="glyphicon glyphicon-picture green"></i> wallpaper1.jpg', type: 'item'},
            {name: '<i class="glyphicon glyphicon-picture green"></i> wallpaper2.jpg', type: 'item'},
            {name: '<i class="glyphicon glyphicon-picture green"></i> wallpaper3.jpg', type: 'item'},
            {name: '<i class="glyphicon glyphicon-picture green"></i> wallpaper4.jpg', type: 'item'}
	]
    };
    tree_data['pictures']['additionalParameters']['children']['camera']['additionalParameters'] = {
	'children' : [
            {name: '<i class="glyphicon glyphicon-picture green"></i> photo1.jpg', type: 'item'},
            {name: '<i class="glyphicon glyphicon-picture green"></i> photo2.jpg', type: 'item'},
            {name: '<i class="glyphicon glyphicon-picture green"></i> photo3.jpg', type: 'item'},
            {name: '<i class="glyphicon glyphicon-picture green"></i> photo4.jpg', type: 'item'},
            {name: '<i class="glyphicon glyphicon-picture green"></i> photo5.jpg', type: 'item'},
            {name: '<i class="glyphicon glyphicon-picture green"></i> photo6.jpg', type: 'item'}
	]
    };


    tree_data['documents']['additionalParameters'] = {
	'children' : [
            {name: '<i class="glyphicon glyphicon-file red"></i> document1.pdf', type: 'item'},
            {name: '<i class="glyphicon glyphicon-file grey"></i> document2.doc', type: 'item'},
            {name: '<i class="glyphicon glyphicon-file grey"></i> document3.doc', type: 'item'},
            {name: '<i class="glyphicon glyphicon-file red"></i> document4.pdf', type: 'item'},
            {name: '<i class="glyphicon glyphicon-file grey"></i> document5.doc', type: 'item'}
	]
    };

    tree_data['backup']['additionalParameters'] = {
	'children' : [
            {name: '<i class="glyphicon glyphicon-briefcase brown"></i> backup1.zip', type: 'item'},
            {name: '<i class="glyphicon glyphicon-briefcase brown"></i> backup2.zip', type: 'item'},
            {name: '<i class="glyphicon glyphicon-briefcase brown"></i> backup3.zip', type: 'item'},
            {name: '<i class="glyphicon glyphicon-briefcase brown"></i> backup4.zip', type: 'item'}
	]
    };
//    alert(JSON.stringify(tree_data));
//    var treeDataSource = new DataSourceTree({data: tree_data});
//    $('#menu-tree').ace_tree({
//            dataSource: treeDataSource,
//            loadingHTML:'<div class="tree-loading"><i class="glyphicon glyphicon-refresh icon-spin blue"></i></div>',
//            'open-icon' : 'glyphicon-chevron-down',
//            'close-icon' : 'glyphicon-chevron-right',
//            'selectable' : false,
//            'selected-icon' : null,
//            'unselected-icon' : null
//    }).find('.tree-folder-header,.tree-item').append('<div class="pull-right">aaaaa</div>');*/
    $('#menu-tree .tree-folder-header').click(function(){
        $(this).find(' + .tree-folder-content').toggleClass('hide');
        $(this).find(' > .glyphicon-chevron-right').toggleClass('rota60');
    });
    var pan = '<li><a class="tarmain" href="{:U(CONTROLLER_NAME.'/'.ACTION_NAME)}">{:L($Think.CONTROLLER_NAME)}</a></li>\n\
<li class="active">{:L($Think.ACTION_NAME)}</li>';
    $('#breadcrumbs .breadcrumb li:gt(0)').remove();
    $('#breadcrumbs .breadcrumb').append(pan);
    $('.page-header h1').empty();
    $('.page-header h1').append('{:L($Think.CONTROLLER_NAME)}<small class="glyphicon glyphicon-chevron-right"> {:L($Think.ACTION_NAME)}</small>');

    $('a.tarmain').click(function(e){
        $.get( $(this).attr('href'),function(data){
            if($.isPlainObject(data)){
                show_msg(data);
            }else{
                $('#new_content').html(data);
            }
        });
        e.preventDefault();
    });
</script>